<template>
    <div class="learn-materials">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="课程列表" name="courseList">
                <SearchableList :list="materialList" @change="getMaterialList" @item-click="onMaterialItemClick">
                </SearchableList>
            </el-tab-pane>
            <el-tab-pane label="查看记录" name="record" :disabled="true"></el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import SearchableList from './components/SearchableList.vue'
import { getLearnMaterialList } from '@/api/learn/materials.js'

const activeName = ref('courseList')

const handleClick = (tab, event) => {
    // console.log(tab, event)
}

const materialList = ref([])
async function getMaterialList(params = {}) {
    const otherParams = { contentType: 1 }
    let res = await getLearnMaterialList({ ...params, ...otherParams })
    materialList.value = res.rows
}

getMaterialList()

const router = useRouter()
function onMaterialItemClick(item) {
    if (!item?.fileList?.length) return ElMessage.warning('该课程暂无文件')
    router.push({ name: 'MaterialsFile', state: { fileList: JSON.parse(JSON.stringify(item.fileList)), libId: item.libId } })
}



</script>
<style scoped lang="scss">
.learn-materials {
    padding: 20px 0;
    height: calc(100vh - 189px);
    overflow: hidden;

    .demo-tabs {
        height: 100%;

        :deep(.el-tabs__content) {
            height: calc(100% - 40px);
            padding: 45px 42px;
            color: #6b778c;
            font-size: 32px;
            font-weight: 600;

            .el-tab-pane {
                height: 100%;
            }
        }
    }
}
</style>